<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style> 
    body{
        margin: 0;
    }

    .ring{
        width: 100%;
        height: 300px;
        /* border: 1px solid red; */
        margin: 200px auto;

        /* 3d效果的关键属性 */
        perspective: 1000px;
    }

    .ring-list{
        width: 300px;
        height: 250px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* background-color: skyblue; */

        /* 将子元素设置为3d效果 */
        transform-style: preserve-3d;
        animation: rotateAuto 60s linear infinite;
    }

    .ring-list img{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        object-fit: cover;
        --angle:calc(var(--index) * 18deg);
        transform: rotateY(var(--angle)) translateZ(-1000px);
        backface-visibility: hidden; /* 隐藏背面 */
    }

    /* .ring:hover .ring-list{
        transform: rotateX(-45deg);
    } */

     @keyframes rotateAuto {
        0%{
            transform: rotateY(0deg);
        }     
        
        100%{
            transform: rotateY(360deg);
        }
     }
</style>
<body>
    <div class="ring">
        <div class="ring-list">
            <img src="/src/img/grid/01.png" style="--index:0">
            <img src="/src/img/grid/02.png" style="--index:1">
            <img src="/src/img/grid/03.png" style="--index:2">
            <img src="/src/img/grid/04.png" style="--index:3">
            <img src="/src/img/grid/05.png" style="--index:4">
            <img src="/src/img/grid/06.png" style="--index:5">
            <img src="/src/img/grid/07.png" style="--index:6">
            <img src="/src/img/grid/08.png" style="--index:7">
            <img src="/src/img/grid/09.png" style="--index:8">
            <img src="/src/img/grid/10.png" style="--index:9">
            <img src="/src/img/grid/01.png" style="--index:10">
            <img src="/src/img/grid/02.png" style="--index:11">
            <img src="/src/img/grid/03.png" style="--index:12">
            <img src="/src/img/grid/04.png" style="--index:13">
            <img src="/src/img/grid/05.png" style="--index:14">
            <img src="/src/img/grid/06.png" style="--index:15">
            <img src="/src/img/grid/07.png" style="--index:16">
            <img src="/src/img/grid/08.png" style="--index:17">
            <img src="/src/img/grid/09.png" style="--index:18">
            <img src="/src/img/grid/10.png" style="--index:19">
        </div>
    </div>
</body>
</html>